<template>
  <view class="activity-list-container">
    <view class="search-box">
      <input type="text" v-model="searchKeyword" placeholder="请输入关键字搜索" class="search-input" />
    </view>
    <view class="status-filter">
      <text v-for="status in statusOptions" :key="status.value" :class="['status-option', { active: currentStatus === status.value }]" @click="currentStatus = status.value">{{ status.label }}</text>
    </view>
    <scroll-view scroll-y class="activity-scroll">
      <view v-for="item in filteredActivityList" :key="item.id" class="activity-card" @click="goToActivityDetail(item.id)">
        <image :src="item.image_url" class="activity-image" mode="aspectFill" />
        <view class="activity-info">
          <view class="activity-card-title">{{ item.title }}</view>
          <view class="activity-meta">
            <text class="activity-time">{{ formatTime(item.activity_start_time) }} - {{ formatTime(item.activity_end_time) }}</text>
            <text class="activity-location">{{ item.location }}</text>
          </view>
          <view class="activity-content">{{ item.content }}</view>
          <view class="activity-tags">
            <text class="activity-tag">人数上限：{{ item.capacity }}</text>
            <text class="activity-tag">积分：{{ item.points }}</text>
            <text class="activity-tag">年龄：{{ item.min_age }}-{{ item.max_age }}</text>
          </view>
          <view class="activity-signup-progress">
            <text class="activity-signup-text">报名人数：{{ item.signup_count }}/{{ item.capacity }}</text>
            <view class="activity-progress-bar">
              <view class="activity-progress-inner" :style="{ width: (item.signup_count / item.capacity * 100) + '%' }"></view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="filteredActivityList.length === 0" class="no-activity">暂无活动</view>
      <view style="height: 120rpx;"></view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import { request } from '../../utiles/request';

const activityList = ref<any[]>([]);
const searchKeyword = ref('');
const currentStatus = ref('all');

const statusOptions = [
  { label: '全部', value: 'all' },
  { label: '进行中', value: 'ongoing' },
  { label: '未开始', value: 'upcoming' },
  { label: '已结束', value: 'ended' }
];

const formatTime = (time: string) => {
  if (!time) return '';
  const date = new Date(time.replace(/-/g, '/'));
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, '0');
  const d = String(date.getDate()).padStart(2, '0');
  const h = String(date.getHours()).padStart(2, '0');
  const min = String(date.getMinutes()).padStart(2, '0');
  return `${y}-${m}-${d} ${h}:${min}`;
};

const getActivityList = () => {
  request({
    url: '/admin/api/activity/list',
    method: 'GET',
    data: {
      page: 1,
      page_size: 20
    }
  }).then(res => {
    if (res.data && (res.data.code === 0 || res.data.code === 200)) {
      activityList.value = res.data.data.list;
    }
  });
};

const goToActivityDetail = (id: number) => {
  uni.navigateTo({
    url: `/pages/activetyDetail/activetyDetail?id=${id}`
  });
};

const getActivityStatus = (startTime: string, endTime: string) => {
  const now = new Date();
  const start = new Date(startTime.replace(/-/g, '/'));
  const end = new Date(endTime.replace(/-/g, '/'));
  if (now < start) return 'upcoming';
  if (now > end) return 'ended';
  return 'ongoing';
};

const filteredActivityList = computed(() => {
  return activityList.value.filter(item => {
    const status = getActivityStatus(item.activity_start_time, item.activity_end_time);
    const matchesStatus = currentStatus.value === 'all' || status === currentStatus.value;
    const matchesKeyword = item.title.toLowerCase().includes(searchKeyword.value.toLowerCase()) || item.content.toLowerCase().includes(searchKeyword.value.toLowerCase());
    return matchesStatus && matchesKeyword;
  });
});

onMounted(() => {
  getActivityList();
});
</script>

<style>
.activity-list-container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #e3f2fd 0%, #f5f7fa 100%);
  padding-bottom: 80rpx;
}
.search-box {
  padding: 20rpx;
  background: #fff;
  border-bottom: 1rpx solid #e0e0e0;
}
.search-input {
  width: 100%;
  height: 60rpx;
  border: 1rpx solid #ccc;
  border-radius: 30rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}
.status-filter {
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  background: #fff;
  border-bottom: 1rpx solid #e0e0e0;
}
.status-option {
  font-size: 28rpx;
  color: #666;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  cursor: pointer;
}
.status-option.active {
  background: #1976D2;
  color: #fff;
}
.activity-scroll {
  width: 95%;
  margin: auto;
}
.activity-card {
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(25, 118, 210, 0.08);
  margin-bottom: 40rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}
.activity-card:hover {
  box-shadow: 0 12rpx 40rpx rgba(25, 118, 210, 0.16);
}
.activity-image {
  width: 100%;
  height: 260rpx;
  object-fit: cover;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
}
.activity-info {
  padding: 32rpx 28rpx 24rpx 28rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.activity-card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1565C0;
  margin-bottom: 8rpx;
}
.activity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24rpx;
  font-size: 24rpx;
  color: #888;
}
.activity-time {
  color: #1976D2;
}
.activity-location {
  color: #43a047;
}
.activity-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.7;
  margin: 8rpx 0 0 0;
}
.activity-tags {
  display: flex;
  gap: 18rpx;
  margin-top: 10rpx;
}
.activity-tag {
  font-size: 22rpx;
  color: #1976D2;
  background: #e3f2fd;
  border-radius: 8rpx;
  padding: 4rpx 16rpx;
}
.activity-signup-progress {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-top: 10rpx;
}
.activity-signup-text {
  font-size: 24rpx;
  color: #888;
}
.activity-progress-bar {
  width: 100%;
  height: 12rpx;
  background-color: #e0e0e0;
  border-radius: 6rpx;
}
.activity-progress-inner {
  height: 100%;
  background-color: #1976D2;
  border-radius: 6rpx;
}
.no-activity {
  text-align: center;
  color: #999;
  font-size: 28rpx;
  margin-top: 40rpx;
}
</style>